<!-- 角色=> 企业  -- 征信查询 -->
<template>
  <div class="main">
    <el-tabs type="border-card" @tab-click="GetreportPagedAndSort()">
      <el-tab-pane label="企业征信数据系统">
        <PureTableBar class="list_hei">
          <template #buttons>
            <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="GetRepot">
              获取征信报告
            </el-button>
          </template>
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading"
              size="small" :data="dataList" max-height="600" :columns="columns" :checkList="checkList"
              :pagination="pagination" :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
      <el-tab-pane label="企业征信报告">
        <PureTableBar class="list_hei">
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading2"
              size="small" :data="dataList2" max-height="600" :columns="columns2" :checkList="checkList"
              :pagination="pagination2" :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }" @size-change="handleSizeChanges" @current-change="handleCurrentChanges">
              <template #operation="{ row }">
                <el-button type='primary' size="small" text @click="CheckCreditReport(row)">
                  查看征信报告
                </el-button>
                <el-button type='primary' size="small" text @click="CheckCreditPower(row)"
                  v-if="row.applicantType == '2'">
                  查看委托书
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
    </el-tabs>

    <!-- 获取征信报告弹窗 -->

    <ReDialog :width="650" :height="550" :models="RepotVisible" @Closes="CloseApplication(RepotFroms)">
      <template #header>
      </template>
      <template #main>
        <el-scrollbar height="450px">
          <el-tabs type="border-card" v-model="TabsActiveName">
            <el-tab-pane label="企业征信报告查询申请表" name="1">
              <h2 style="text-align: center;">企业征信报告查询申请表</h2>
              <el-form ref="RepotFroms" :model="RepotFrom" :rules="rules" :inline="true" label-width="150px">
                <p class="form_title">企业信息</p>
                <el-form-item label="企业名称" prop="FirmName">
                  <el-input placeholder="企业名称" v-model.trim="RepotFrom.FirmName" maxlength="18" />
                </el-form-item>
                <el-form-item label="证件类型">
                  <el-input placeholder="证件类型" disabled value="营业执照" />
                </el-form-item>
                <el-form-item label="组织机构代码" prop="OrganizationCode">
                  <el-input placeholder="组织机构代码" v-model.trim="RepotFrom.OrganizationCode" />
                </el-form-item>
                <el-form-item label="组织机构代码" style="opacity: 0;user-select: none;pointer-events: none;">
                  <el-input />
                </el-form-item>
                <p class="form_title">申请人信息</p>
                <el-form-item label="申请类型" prop="QueryApplicantType">
                  <el-radio-group v-model.trim="RepotFrom.QueryApplicantType">
                    <el-radio :label="1">企业法定代表人</el-radio>
                    <el-radio :label="2">企业法定代表人授权的代理人</el-radio>
                  </el-radio-group>
                </el-form-item>

                <br>
                <el-form-item label="申请人名称" prop="NameApplicant">
                  <el-input placeholder="申请人名称" v-model.trim="RepotFrom.NameApplicant" />
                </el-form-item>

                <el-form-item label="申请人证件类型">
                  <el-input placeholder="申请人证件类型" disabled value="身份证" />
                </el-form-item>

                <el-form-item label="申请人证件号码" prop="ApplicantId">
                  <el-input placeholder="申请人证件号码" v-model.trim="RepotFrom.ApplicantId" />
                </el-form-item>

                <el-form-item label="申请人有效联系电话" prop="ApplicantPhone">
                  <el-input placeholder="申请人有效联系电话" v-model.trim="RepotFrom.ApplicantPhone" />
                </el-form-item>

                <p class="form_title">查询机构信息</p>
                <el-form-item label="查询机构" prop="AgencyName">
                  <el-input placeholder="申请人名称" disabled value="中国人民银行" />
                </el-form-item>
                <el-form-item label="查询时间" prop="QueryTime">
                  <el-date-picker type="date" v-model="RepotFrom.QueryTime" placeholder="请选择日期时间" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" />
                </el-form-item>
                <p class="form_title">申请人授权</p>
                <el-row>
                  <el-col :span="24">已授权查询企业信用报告</el-col>
                </el-row>
                <p class="form_title">签字确认</p>
                <el-form-item label="申请人签字" prop="SignApplicant">
                  <el-input placeholder="申请人签字" v-model.trim="RepotFrom.SignApplicant" />
                </el-form-item>
                <el-form-item label="申请日期" prop="ApplicationDate">
                  <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                    v-model="RepotFrom.ApplicationDate" placeholder="请选择日期时间" />
                </el-form-item>
              </el-form>
              <!-- <span class="dialog-footer">
            <el-button @click="SubmitApplication(RepotFroms)" type="primary">申请</el-button>
            <el-button @click="CloseApplication(RepotFroms)"> 取消 </el-button>
          </span> -->
            </el-tab-pane>
            <el-tab-pane label="企业法定代表人授权委托书" name="2" v-if="RepotFrom.QueryApplicantType === 2">
              <h2 style="text-align: center;">企业法定代表人授权委托书</h2>
              <power-attorney ref="powerattorney_" />
              <!-- <span class="dialog-footer">
            <el-button type="primary" @click="SubmitApplication(RepotFroms)">申请</el-button>
            <el-button type="warning" :disabled="isSeal" @click="SubmitSeal()">盖章</el-button>
            <el-button> 取消 </el-button>
          </span> -->
            </el-tab-pane>
          </el-tabs>
        </el-scrollbar>
      </template>
      <template #footer>
        <el-button @click="SubmitApplication(RepotFroms)" :loading="btnloading" type="primary">申请</el-button>
        <el-button v-if="TabsActiveName == '2'" type="warning" :disabled="isSeal" @click="SubmitSeal()">盖章</el-button>
        <el-button @click="CloseApplication(RepotFroms)"> 取消 </el-button>
      </template>
    </ReDialog>


    <!-- 查看征信报告 -->
    <ReDialog :width="700" :height="550" :models="CreditReportVisible" @Closes="CreditReportVisible = false">
      <template #header>
        <h2 style="text-align: center;">企业信用报告</h2>
      </template>
      <template #main>
        <el-scrollbar height="480px">
          <div class="showBG" v-html="ShowReport"></div>
        </el-scrollbar>
      </template>
      <template #footer>
      </template>
    </ReDialog>
    <!-- 查看委托证书 -->
    <ReDialog :width="700" :height="550" :models="CreditPowerVisible" @Closes="CreditPowerVisible = false">
      <template #header>
        <h2 style="text-align: center;">查看委托证书</h2>
      </template>
      <template #main>
        <power-attorney ref="powerattorney_" :data="poweratData" />
      </template>
      <template #footer>
      </template>
    </ReDialog>
  </div>
</template>
<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useFirmCredit } from "./hook/FirmCredit";
import PowerAttorney from "./component/PowerAttorney.vue"
const {
  isSeal,
  RepotFroms,
  dataList,
  dataList2,
  loading,
  loading2,
  RepotVisible,
  TabsActiveName,
  poweratData,
  powerattorney_,
  CreditPowerVisible,
  CreditReportVisible,
  pagination,
  pagination2,
  columns,
  columns2,
  rules,
  btnloading,
  ShowReport,
  RepotFrom,
  RepotFrom2,
  GetRepot,
  SubmitSeal,
  GetreportPagedAndSort,
  CheckCreditReport,
  handleSizeChange,
  handleCurrentChange,
  handleSizeChanges,
  handleCurrentChanges,
  CheckCreditPower,
  CloseApplication,
  SubmitApplication,
  ShowRepot
} = useFirmCredit()
import AddFill from "@iconify-icons/ri/add-circle-line";

</script>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

body {
  width: 100%;
  height: 100%;
}

::deep(.el-tabs) {
  height: 99%;
}

:deep(.el-dialog__body) {
  padding: 0;
  margin-top: 15px;
}

:deep(.el-row) {
  margin-bottom: 10px;
}

:deep(.el-dialog__footer) {
  text-align: center;
}

:deep(.el-tabs__content) {
  padding: 5px 15px;
}

:deep(.mt-6) {
  margin: 0;
}

.form_title {
  text-align: center;
  padding: 5px;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
  background-color: #f3f3f3;
  color: #409eff;
}

.subtim_qyfd_int {
  line-height: 42px;
  position: relative;

  .tcsq {
    text-align: left;
    padding-left: 20px;
  }

  .subtim_qyfd_int_ul {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .subtim_qyfd_int_dl {
    text-align: right;
  }

  .qyfd_int {
    width: 215px;
    margin: 0 5px;
  }

  // 盖章
  .me_fqx {
    display: inline-block;
    width: 160px;
    height: 160px;
    position: absolute;
    right: 25%;
    top: 43%;
  }
}

:deep(.showBG) {
  font-size: 14px;

  tr {
    line-height: 28px;

    td {
      border: 1px solid;
    }
  }
}

// :deep(.model_class) {
//   position: absolute !important;
//   z-index: 20 !important;

//   .el-overlay-dialog {
//     position: absolute !important;
//   }
// }
</style>
